<template>
  <div id="dashboard">
    <a-row>
      <a-col :span="24">
        <div>
          <div class="card-list">
            <a-card :bordered="false" class="number-card">
              <a-card-meta title="新增用户">
                <span slot="description">32人</span>
                <a-icon type="usergroup-add" slot="avatar" />
              </a-card-meta>
            </a-card>

            <a-card :bordered="false" class="number-card">
              <a-card-meta title="昨日收益">
                <span slot="description">￥120.00</span>
                <a-icon type="up" slot="avatar" style="color:red" />
              </a-card-meta>
            </a-card>

            <a-card :bordered="false" class="number-card">
              <a-card-meta title="昨日支出">
                <span slot="description">￥90.00</span>
                <a-icon type="down" slot="avatar" style="color:green" />
              </a-card-meta>
            </a-card>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :xs="20">
        <u-chart1></u-chart1>
        <u-chart3></u-chart3>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { EventBus } from "@/eventBus";
import UChart1 from "./components/Chart1";
import UChart2 from "./components/Chart2";
import UChart3 from "./components/Chart3";
import UDate from "./components/Date";

export default {
  components: {
    UChart1,
    UChart2,
    UChart3,
    UDate
  },
  data() {
    return {
      user: {
        username: "",
        nickname: ""
      }
    };
  },
  created() {
    EventBus.$on("updateInfo", user => {
      this.user = user;
    });
    setTimeout(() => {
      this.cardLoading = false;
    }, 3000);
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
#dashboard {
  padding: 24px;
  .card-list {
    .number-card {
      display: inline-block;
      width: 300px;
      margin: 8px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      border: 1px solid #e8e8e8;
      .ant-card-meta-avatar i {
        font-size: 44px;
      }
    }
  }
}
</style>
